<template>
  <div>
    <v-overlay :value="loading">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
    <v-carousel height="290">
      <v-carousel-item
        v-for="(picUrl, i) in picUrls"
        :key="i"
        :src="picUrl"
      ></v-carousel-item>
    </v-carousel>
    <v-card class="d-flex flex-column align-center pa-4" outlined flat tile>
      <span class="subtitle-1 text-center" v-text="goods.name"></span>
      <span
        class="subtitle-2 grey--text text--lighten-1 text-center"
        v-text="goods.subTitle"
      ></span>
      <div>
        <span
          class="subtitle-2 red--text mr-3"
          v-if="goods.price"
          v-text="`￥${goods.price}`"
        ></span>
        <!-- <span class="subtitle-2 grey--text text--lighten-1">￥199</span> -->
      </div>
    </v-card>
    <v-card
      class="d-flex justify-space-between align-center py-2 px-4"
      outlined
      flat
      tile
      v-if="false"
    >
      <span style="font-size: 14px">秒杀抢购中</span>
      <div class="d-flex align-center">
        <span style="font-size: 12px">本场结束剩余</span>
        <kbd class="ml-2">00</kbd>
        <kbd class="ml-2">20</kbd>
        <kbd class="ml-2">56</kbd>
      </div>
    </v-card>
    <div class="line-space"></div>
    <v-list class="py-0" dense>
      <v-list-item-group color="primary">
        <template v-for="(item, i) in MenuItems">
          <v-list-item
            v-if="item.title"
            :key="i"
            @click="item.action ? item.action() : () => {}"
          >
            <v-list-item-content v-if="item.title">
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>
            <span class="caption text--secondary" v-if="item.subTitle">{{
              typeof item.subTitle === 'string'
                ? item.subTitle
                : item.subTitle()
            }}</span>
            <div class="d-flex align-center" v-else>
              <span
                class="d-flex align-center caption text--secondary"
                v-for="(serviceName, index) in item.services"
                :key="index"
              >
                <v-icon class="ml-2" color="#FCAB6B" size="14"
                  >mdi-checkbox-marked-circle-outline</v-icon
                >
                <span>{{ serviceName }}</span>
              </span>
            </div>
            <v-list-item-icon class="ml-0" v-if="item.title">
              <v-icon>mdi-chevron-right</v-icon>
            </v-list-item-icon>
          </v-list-item>
          <v-divider v-else-if="item.divider" :key="i"></v-divider>
        </template>
        <v-list-item @click="showSpecificationModal()">
          <v-list-item-content>
            <v-list-item-title v-text="specListItem.title"></v-list-item-title>
          </v-list-item-content>
          <span
            class="caption text--secondary"
            v-text="
              (specListItem.subTitle || []).map(each => each.value).join('/')
            "
          ></span>
          <v-list-item-icon class="ml-0">
            <v-icon>mdi-chevron-right</v-icon>
          </v-list-item-icon>
        </v-list-item>
        <div class="line-space"></div>
      </v-list-item-group>
    </v-list>
    <!-- <div class="line-space"></div> -->
    <v-card
      class="d-flex flex-column align-center py-3 px-4"
      outlined
      flat
      tile
    >
      <span class="mb-1" style="font-size: 15px">商品介绍</span>
      <div class="subtitle-2 text--secondary" v-text="goods.description"></div>
    </v-card>

    <div class="line-space"></div>

    <!-- <v-card
      class="d-flex flex-column align-center py-3 px-4"
      outlined
      flat
      tile
    >
      <span class="mb-2" style="font-size: 15px">商品评价</span>
      <div class="d-flex justify-center">
        <v-avatar
          class="mr-2"
          v-for="(message, i) in messages.slice(0, 3)"
          :key="i"
          size="36px"
        >
          <img alt="Avatar" :src="message.avatar" />
        </v-avatar>
        <v-btn icon>
          <v-icon size="28px">mdi-chevron-right-circle-outline</v-icon>
        </v-btn>
      </div>
      <v-container class="py-0" fluid>
        <v-row>
          <v-col v-for="n in 3" :key="n" class="d-flex child-flex" cols="4">
            <v-card flat tile class="d-flex">
              <v-img
                :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
                :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
                aspect-ratio="1"
                class="grey lighten-2"
              >
                <template v-slot:placeholder>
                  <v-row
                    class="fill-height ma-0"
                    align="center"
                    justify="center"
                  >
                    <v-progress-circular
                      indeterminate
                      color="grey lighten-5"
                    ></v-progress-circular>
                  </v-row>
                </template>
              </v-img>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
      <span class="caption text--secondary">共有100条评价</span>
    </v-card> -->

    <!-- <div class="line-space"></div> -->

    <v-card class="py-3" outlined flat tile>
      <p class="mb-0" align="center" style="font-size: 15px">品牌信息</p>
      <v-list-item>
        <v-list-item-avatar>
          <v-icon class="grey lighten-1 white--text">folder</v-icon>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title v-text="goods.brandName"></v-list-item-title>
          <!-- <v-list-item-subtitle
            >华为消费者业务产品全面覆盖手机、移动宽带终端、终端云等，凭借自身的全球化网络优势、全球化运营能力，致力于将最新的科技带给消费者，让世界各地享受到技术进步的喜悦，以行践言，实现梦想</v-list-item-subtitle
          > -->
        </v-list-item-content>

        <!-- <v-list-item-action>
          <v-btn icon>
            <v-icon color="grey lighten-1">mdi-chevron-right</v-icon>
          </v-btn>
        </v-list-item-action> -->
      </v-list-item>
    </v-card>
    <div class="line-space"></div>
    <ParamsModal ref="paramsModal" :data="goods.params" />
    <SpecificationsModal
      ref="specificationsModal"
      :data="goods.specifications"
    />
  </div>
</template>

<script>
import ParamsModal from './components/ParamsModal.vue';
import SpecificationsModal from './components/SpecificationsModal.vue';

export default {
  props: ['goods', 'loading'],
  components: { ParamsModal, SpecificationsModal },
  data() {
    return {
      items: [
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
        }
      ],
      MenuItems: [
        // {
        //   title: '服务说明',
        //   services: ['无忧退货', '快速退货', '免费包邮']
        // },
        // {
        //   divider: true
        // },
        {
          title: '商品参数',
          subTitle: '查看',
          action: () => {
            this.$refs.paramsModal.show();
          }
        },
        {
          divider: true
        }
      ],
      specListItem: {
        title: '选择规格'
      },
      messages: [
        {
          avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460',
          name: 'John Leider1'
        },
        {
          avatar: 'https://cdn.vuetifyjs.com/images/john.jpg',
          name: 'John Leider2'
        },
        {
          avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460',
          name: 'John Leider3'
        }
      ]
    };
  },
  methods: {
    showSpecificationModal() {
      this.$refs.specificationsModal.show();
    },
    getProductAttr() {
      return this.$refs.specificationsModal.getProductAttr();
    }
  },
  mounted() {
    this.$bus.on('onSpecificationChange', data => {
      this.specListItem.subTitle = data;
    });
  },
  destroyed: function() {
    this.$bus.off('onSpecificationChange');
  },
  watch: {
    goods(newValue) {
      this.$set(
        this.specListItem,
        'subTitle',
        (newValue.specifications || []).map(each => ({
          key: each.name,
          value: each.value.split(',')[0]
        }))
      );
    }
  },
  computed: {
    picUrls() {
      return (this.goods.albumPics || '').split(',');
    }
  }
};
</script>
